<template>
  <div class="quill-editor-container">
    <!-- 替换为 v-md-editor 组件 -->
    <v-md-editor
      v-model="content"
      :toolbar-config="toolbarConfig"
      :upload="uploadConfig"
      @change="onEditorChange"
      style="min-height: 300px"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "", // 直接存储 Markdown 内容（无需转换）
      // 工具栏配置（保留常用功能）
      toolbarConfig: {
        show: true, // 显示工具栏
        tools: [
          "bold",
          "italic",
          "underline",
          "strike",
          "|",
          "header",
          "|",
          "list-ordered",
          "list-unordered",
          "|",
          "quote",
          "code",
          "link",
          "image", // 保留图片按钮
        ],
      },
      // 图片上传配置（与 main.js 或后端接口匹配）
      uploadConfig: {
        server: "http://127.0.0.1:4000/api/upload", // 上传接口地址
        fieldName: "file", // 后端接收文件的字段名
        success: (res) => {
          // 上传成功后返回图片 URL（需与后端返回格式一致）
          return res.data.url; // 假设后端返回 { data: { url: "图片地址" } }
        },
        error: (err) => {
          this.$message.error("图片上传失败：" + err.message);
        },
      },
    };
  },
  methods: {
    onEditorChange(value) {
      // 直接传递 Markdown 内容（无需转换）
      this.$emit("input", value);
    },
  },
};
</script>

<style lang="less" scoped>
.quill-editor-container {
  // 移除原有 .ql-editor 样式（v-md-editor 有独立样式）
  .v-md-editor {
    // 可选：调整编辑器内边距
    padding: 15px;
  }
}
</style>
